<template>
   
  <!-- 导航 -->
  <div class="nav">
    <div class="nav_Box">
      <div class="nav_Box_item " :class="{active:num===0}" @click="toDiscovery">
        会员专区
      </div>
      <div class="nav_Box_item " :class="{active:num===1}" @click="toLiveClass">
        视频课
      </div>
      <div class="nav_Box_item " :class="{active:num===2}" @click="toLiveBroadcast">
        直播课
      </div>
      <div class="nav_Box_item" >
        线下课
      </div>
      <div class="nav_Box_item " :class="{active:num===3}" @click="toTheme">
        主题
      </div>
    </div>
  </div>
  <Public></Public>
</template>

<script setup lang="ts">

import Public from './public.vue'
import router from '../../router';
import MemberZone from './memberZone/index.vue'
import {onMounted ,ref} from 'vue'
import useDiscoveryStore from '../../stores/discovery'
import useRecommendStore from '../../stores/recommend'
const recommendStore = useRecommendStore()
// import {ref} from 'vue'
let num = ref(0)
// @click="num = 2" :class="num===2?'border':''"

const toDiscovery = () => {
  router.push({path:'/discovery/memberZone'})
  num.value = 0
}
const toLiveClass = () => {
  router.push({path:'/discovery/liveClass'})
  num.value = 1
}
const toLiveBroadcast = () => {
  router.push({path:'/discovery/liveBroadcast'})
  num.value = 2
}
const toTheme = () => {
  router.push({path:'/discovery/theme'})
  num.value = 3
}

const discoveryStore = useDiscoveryStore()
onMounted(() => {
  getInitData()
  getVideoList()

})


// 初始化数据
const getInitData = ()=>{
  discoveryStore.getChoises()
  recommendStore.getRecommendVideoList()
  discoveryStore.getVideoClass() 
  discoveryStore.getOfflineClass()
}
const getVideoList = ()=>{
  // discoveryStore.getVideoCardList()

}
</script>

<style scoped>
* {
margin: 0;
padding: 0;

}

/* .bigbox {
width: 100%;
height: 100%;
background-color: #F5F7F9;
} */

.nav {
width: 100%;
height: 80px;
background-color: #fff;
}

/* 导航容器 */
.nav_Box {
width: 1000px;
height: 80px;
/* background-color: hotpink; */
margin: 0 auto;
display: flex;
flex-direction: row;
/* item居中 */
justify-content: center;
align-items: center;
}

/* 导航每一项 */
.nav_Box_item {
color: #111;
padding: 20px 4px;
margin: 0 20px;
text-align: center;
box-sizing: border-box;
border-bottom: 3px solid transparent;
}

.active {
border-bottom: 3px solid #000;
}

</style>